import { forwardRef, useImperativeHandle, useRef, useState } from "react";
import { Card, Divider, Modal } from "antd";
import { ProForm } from "@ant-design/pro-components";
import ProFormCode from "@/components/form/ProFormCode";
import { dmServiceTestCall } from "@/api/sharing/dmService";
import CodeEditor from "@/components/codemirror/CodeEditor";

const TryoutModal = (_, ref) => {
  const formRef = useRef(null);
  const [open, setOpen] = useState(false);
  const [record, setRecord] = useState(null);
  // 响应结果
  const [result, setResult] = useState(null);

  useImperativeHandle(ref, () => ({
    show: (data) => {
      setRecord(data)
      setOpen(true);
      formRef.current?.setFieldsValue(data);
    }
  }));

  const onCancel = () => {
    setOpen(false);
  }
  const onOk = () => {
    setOpen(false);
  }
  const onFinish = (values) => {
    dmServiceTestCall(values).then(res => {
      setResult(res);
    })
  }
  return (<Modal title="服务测试" width={800} open={open} onCancel={onCancel} onOk={onOk}>
    <ProForm initialValues={record} formRef={formRef} onFinish={onFinish} submitter={{
      searchConfig: {
        submitText: '测试'
      },
      // 配置按钮的属性
      resetButtonProps: {
        style: {
          // 隐藏重置按钮
          display: 'none',
        },
      },
    }}>
      <ProForm.Item name="dataSourceId" hidden></ProForm.Item>
      <ProFormCode name="sqlText" fieldProps={{ lang: "sql", height: "150px" }} />
    </ProForm>
    {
      result && <>
        <Divider />
        <CodeEditor value={JSON.stringify(result || {}, null, 2)} lang="json" height="300px" />
      </>
    }
  </Modal>);
}

export default forwardRef(TryoutModal);